import React, { Component } from 'react'
import DeviceshowList from "../../components/List/ListComp/DeviceshowList";
import ListContainer from "../../components/List";
import RecommendedReq from "../../components/RecommendedReq";
import ArticleType from "../../types/ArticleType";
import deviceListIcon from '../../static/images/设备列表.svg'
import DeviceKnowledgeIcon from '../../static/images/设备知识.svg'
import './DeviceList.less'

export default class DeviceList extends Component {
    render() {
        return (
            <div className='frameCardWrapper'>
                <div className='flexRow'>
                    <div className="leftFrameBox">
                        <ListContainer
                            title={<div className="deviceListTitle">
                                <img src={deviceListIcon} alt='deviceListIcon' />
                                <b>设备列表</b>
                            </div>}>
                            <DeviceshowList />
                        </ListContainer>
                    </div>
                    <div className="rightFrameBox">
                        <RecommendedReq
                            title={
                                <div className="articleListTitle">
                                    <img src={DeviceKnowledgeIcon} alt='DeviceKnowledgeIcon' />
                                    <b>设备知识</b>
                                </div>
                            }
                            recommendType={ArticleType.KNOWLEDGE} />
                    </div>
                </div>
            </div>
        )
    }
}
